import axios from 'axios';
import React, { Component } from 'react'
import PubSub from 'pubsub-js';

export default class Search extends Component {

  search = ()=>{
    //获取用户输入  连续解构赋值+重命名
    const {keyWordElement:{value:keyWord}} = this;

    //发送请求前通知List更新状态
    // this.props.updateAppState({isFirst:false,isLoading:true})
    PubSub.publish('updateState',{isFirst:false,isLoading:true})
    //发生网络请求 代理解决跨域  本地3000->请求3000代理->转发给5000
    axios.get(`http://localhost:3000/api1/search/users?q=${keyWord}`).then(
      response =>{
        //请求成功后通知List更新状态
        // this.props.updateAppState({isLoading:false,users:response.data.items})
        PubSub.publish('updateState',{isLoading:false,users:response.data.items})
      },
      error =>{
        //请求失败后通知List更新状态
        // this.props.updateAppState({isLoading:false,err:error.message})
        PubSub.publish('updateState',{isLoading:false,err:error.message})
      }
    )
  }
  render() {
    return (
        <section className="jumbotron">
            <h3 className="jumbotron-heading">Search Github Users</h3>
            <div>
              <input ref={c => this.keyWordElement = c} type="text" placeholder="enter the name you search"/>&nbsp;
              <button onClick={this.search}>Search</button>
            </div>
        </section>
    )
  }
}
